import { useState } from 'react';
import Taro from '@tarojs/taro';
import { useMount } from 'ahooks';
import classNames from 'classnames';
import styles from './index.module.less';
import { PageUrlMap } from '@/utils/enum';
import { PageUrlEnum } from '@/utils/enum';
import { useCityStore } from '@/common/hox/cityStore';
import { Location } from '@nutui/icons-react-taro';
const Index = ({ inTabPage = false }) => {
    const [visible, setVisible] = useState(true);
    const { setMovieLocation, movieLocation, position, refresh } = useCityStore();
    const closeBar = () => {
        setVisible(false);
    };
    const openLocation = () => {
        setVisible(false);
        refresh();
    };
    const getSetting = () => {
        return new Promise<Taro.getSetting.SuccessCallbackResult>((resolve, reject) => {
            if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
                Taro.getSetting({
                    success: resolve,
                    fail: reject,
                });
            }
        });
    };

    // 获取用户是否授权过当前应用使用定位
    const authLocationKey = (function () {
        if (process.env.TARO_ENV === 'weapp') {
            return 'scope.userLocation';
        } else return 'location';
    })();

    useMount(async () => {
        if (position !== undefined && position !== false) {
            setVisible(false);
        } else {
            const { authSetting } = await getSetting();
            if (
                authSetting[authLocationKey] !== undefined &&
                authSetting[authLocationKey] &&
                movieLocation?.city !== undefined &&
                movieLocation?.city
            ) {
                setVisible(false);
            }
            // if (movieLocation?.city) setVisible(false)
        }
    });

    const [showTour, setShowTour] = useState(false);

    const closeTour = () => {
        setShowTour(false);
    };
    return (
        <div
            className={classNames(styles.barWrapper, {
                [styles.higherPosition]: !inTabPage,
                [styles.h5Position]: process.env.TARO_ENV === 'h5',
            })}
        >
            <div className={styles.choseLocationBarBox}>
                <div
                    className={styles.choseLocationBar}
                    onClick={() =>
                        Taro.navigateTo({
                            url:
                                PageUrlMap.get(PageUrlEnum.MovieChooseCity) ||
                                '/pages/movie/choose-city/index',
                        })
                    }
                >
                    <div className={styles.barContent}>
                        <div className={styles.left}>
                            <Location color="var(--color-main)" size="14" style={styles.location} />
                            <div className={styles.descItem}>
                                {movieLocation?.city ? movieLocation?.city : '北京'}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {visible && !movieLocation?.city && (
                <div>
                    <div className={styles.upIconBar}></div>
                    <div className={styles.loginBar}>
                        <div className={styles.barContent}>
                            <div className={styles.left}>
                                <div className={styles.loginDescWrapper}>
                                    <div className={styles.descItem}>开启定位即可查看附近影城</div>
                                </div>
                            </div>
                            {/* 根据环境渲染对应组件 */}
                            {process.env.TARO_ENV !== 'h5' ? (
                                <button open-type="openSetting" className={styles.right}>
                                    去开启
                                </button>
                            ) : (
                                <div
                                    className={styles.right}
                                    onClick={openLocation}
                                    role="button"
                                    tabIndex={0}
                                >
                                    去开启
                                </div>
                            )}

                            <div className={styles.closeImg} onClick={closeBar}></div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};
export default Index;
